<template>
 <div>
    <el-form :model="spu">
              <el-form-item label="spu名称">
                <el-input placeholder="spu名称" v-model="spu.spuName"></el-input>
              </el-form-item>

              <el-form-item label="品牌">
                <el-select placeholder="请选择品牌" v-model="spu.tmId">
                  <el-option :value="brand.id" :label="brand.tmName" v-for="brand in spuBrand" :key="brand.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="spu描述">
                <el-input placeholder="spu描述" type="textarea" rows="4" v-model="spu.description"></el-input>
              </el-form-item>

              <el-form-item label="spu图片">
                <el-upload
                  action="/dev-api/admin/product/fileUpload"
                  list-type="picture-card"
                  :file-list="spuImg"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="handleAdd">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </el-form-item>

              <el-form-item label="销售属性">

                <el-select :placeholder="`还有${unselectSaleAttr.length}项未选择`" v-model="saleAttrId">
                  <el-option :label="attr.name" :value="`${attr.id}:${attr.name}`" v-for="attr in unselectSaleAttr" :key="attr.id"></el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-plus" :disabled="!saleAttrId" @click="addSaleAttr">添加销售属性</el-button>

                <el-table :data="spu.spuSaleAttrList" border style="width: 100%;">
                  <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
                  <el-table-column label="属性名" prop="saleAttrName" width="100"></el-table-column>
                  <el-table-column label="属性名称列表">
                    <template scope="{row}">
                        <el-tag
                          :key="tag.id"
                          v-for="(tag,index) in row.spuSaleAttrValueList"
                          closable
                          :disable-transitions="false"
                          @close="row.spuSaleAttrValueList.splice(index,1)">
                          {{tag.saleAttrValueName}}
                        </el-tag>
                        <el-input
                          class="input-new-tag"
                          v-if="row.inputVisible"
                          v-model="row.inputValue"
                          ref="saveTagInput"
                          size="small"
                          @blur="handleInputConfirm(row)"
                          >
                          <!-- @keyup.enter.native="handleInputConfirm" -->
                          <!-- " -->
                        </el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="addsaleAttrValue(row)">添加</el-button>
                        <!-- @click="showInput" -->
                    </template>
                    
                  </el-table-column>
                  <el-table-column label="操作" width="80">
                    <template scope="{$index}">
                        <el-button type="danger" icon="el-icon-delete" @click="spu.spuSaleAttrList.splice($index,1)"></el-button>
                    </template>
                  </el-table-column>
                </el-table>

              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
                <el-button @click="cancel">取消</el-button>
              </el-form-item>

    </el-form>
 </div>
</template>

<script>
export default {
    name: 'spuForm',
    data(){
        return {
            // 上传spu图片
            dialogImageUrl: '',
            dialogVisible: false,
            // 获取spu的全部信息
            spu:{
                category3Id:"",
                description:"",
                spuImageList:[],
                spuName:"",
                spuSaleAttrList:[],
                // spu品牌的id
                tmId:""
            },
            spuBrand:[],
            spuImg:[],
            BaseSaleAttr:[],
            saleAttrId:""
         }
    },
    computed:{
        unselectSaleAttr(){
            let result=this.BaseSaleAttr.filter((item)=>{
                return this.spu.spuSaleAttrList.every((item1)=>{
                    return item.name!=item1.saleAttrName
                })
            });
            return result
        }
    },
    methods:{
        // 添加spu图片
        handleRemove(file, fileList) {
          this.spuImg=fileList;
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleAdd(response,file,fileList){
          this.spuImg=fileList;
        },

        async initSpuData(row){
            // 获取平台全部销售属性
            let result4=await this.$tradeAPI.spu.reqBaseSaleAttr();
            if(result4.code==200){
                this.BaseSaleAttr=result4.data
            };
            // 获得品牌数据
            let result2=await this.$tradeAPI.spu.reqGetBrand();
            if(result2.code==200){
                this.spuBrand=result2.data
            };

            if(row.id){
                // 获取spu图标
                let result3=await this.$tradeAPI.spu.reqSpuImg(row.id);
                if(result3.code==200){
                    let arr=result3.data;
                    arr.forEach(element => {
                        element.name=element.imgName;
                        element.url=element.imgUrl
                    });
                    this.spuImg=arr
                };
    
                // 获取某个spu的全部信息
                let result1=await this.$tradeAPI.spu.reqSpuInfo(row.id);
                if(result1.code==200){
                    this.spu=result1.data
                };
            }

        },

        cancel(){
            this.$emit("changeShow",{show:0,flag:""});
            Object.assign(this._data,this.$options.data())
        },

        addSaleAttr(){
          const [baseSaleAttrId,saleAttrName]=this.saleAttrId.split(":");
          let newSaleAttr={saleAttrName,baseSaleAttrId,spuSaleAttrValueList:[]};
          this.spu.spuSaleAttrList.push(newSaleAttr)
          this.saleAttrId=''
        },

        addsaleAttrValue(row){
          this.$set(row,"inputVisible",true);
          this.$set(row,"inputValue","")
        },

        handleInputConfirm(row){
          const {inputValue,baseSaleAttrId}=row;
          if(inputValue.trim()==""){
            this.$message("请重新输入");
            return
          };
          let check=row.spuSaleAttrValueList.every((item)=>{
            return item.saleAttrValueName!=row.inputValue
          });
          if(!check) return;
          row.inputVisible=false;
          let newSaleAttrValue={saleAttrValueName:inputValue,baseSaleAttrId};
          row.spuSaleAttrValueList.push(newSaleAttrValue)
        },

        async save(){
          this.spu.spuImageList=this.spuImg.map((item)=>{
            return {
              imageName:item.name,
              imageUrl:item.response&&item.response.data||item.url
            }
          });
          let result=await this.$tradeAPI.spu.reqAddUpdateSave(this.spu);
          if(result.code==200){
            this.$message({type:"success",message:"保存成功"});
            this.$emit("changeShow",{show:0,flag:this.spu.id?"修改":"添加"})
          };
          Object.assign(this._data,this.$options.data())
        },

        async addSpu(id3){
          this.spu.category3Id=id3;
            // 获取平台全部销售属性
          let result4=await this.$tradeAPI.spu.reqBaseSaleAttr();
          if(result4.code==200){
              this.BaseSaleAttr=result4.data
          };
          // 获得品牌数据
          let result2=await this.$tradeAPI.spu.reqGetBrand();
          if(result2.code==200){
              this.spuBrand=result2.data
          };
        }


    }




}
</script>

<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
